k

CSS 2D Transformacije

Interaktivni vodič kroz dvodimenzionalne transformacije u CSS-u. Prijeđite mišem preko svakog primjera da biste vidjeli transformaciju u akciji.

translate(x, y)

Pomjera element iz njegovog originalnog položaja horizontalno (X) i vertikalno (Y). Pozitivne vrijednosti pomiču element udesno i prema dolje.

Hover me
MOVE
transform: translate(40px, -30px);

rotate(angle)

Rotira element oko njegove točke središta (transform-origin) za zadani kut. Pozitivne vrijednosti rotiraju u smjeru kazaljke na satu.

Hover me
45°
transform: rotate(45deg);

scale(x, y)

Mijenja veličinu elementa. Vrijednost 1 predstavlja originalnu veličinu, 0.5 polovicu, a 1.5 50% povećanje. Može se različito skalirati po širini i visini.

Hover me
1.5x
transform: scale(1.5);

skew(x-angle, y-angle)

Iskrivljuje element duž X i Y osi, stvarajući efekt naginjanja kao da je element izvučen u stranu. Izražava se u stupnjevima (deg).

Hover me
TILT
transform: skew(20deg, 10deg);

matrix(a, b, c, d, e, f)

Napredna funkcija koja kombinira sve transformacije u jednu matricu od 6 vrijednosti. Omogućuje preciznu matematičku kontrolu nad transformacijama.

Hover me
MATH
transform: matrix(1.2, 0.2, -0.2, 1.2, 30, -20);

Višestruke transformacije

Možete kombinirati više transformacija u jednom svojstvu. Redoslijed je bitan - transformacije se primjenjuju zdesna na lijevo.

Hover me
MIX
transform: translateX(30px) rotate(15deg) scale(1.2);